<template>
    <div style=" width: 100%; height: 100%; overflow: hidden; ">
        <div class="banner">
            <!-- <el-carousel :interval="4000" type="" arrow="always" height="180px" width="340px">
                <el-carousel-item> -->
            <div><img style="height: 100%;width: 100%;" src="https://anxd2.oss-cn-shanghai.aliyuncs.com/redPacket/img/首页-banner.png" @click="imageClick()">
            </div>
            <!-- </el-carousel-item>
            </el-carousel> -->
        </div>

        <div class="shaicha">

            <img @click="goMessage" src="@/assets/images/home/首页-筛查按钮.png" alt="">
            <!-- <img @click="goMessage1" class="btnNews" src="https://www.ainaoxingdong.com/api/an-media/images/an/static/index/btnNews.png" alt=""> -->
            <div class="messageboxactive" v-if="isDone != '0'">
                <img class="messageboxactivebg" src="@/assets/images/home/首页-弹窗.png" alt="" />
                <div class="messageboxactivetext">
                    <p class="messageboxactivetext-text">您已获得2.90元</p>
                    <p class="messageboxactivetext-text">完成筛查继续抢红包</p>
                </div>
            </div>

            <!-- <div class="bottom">
                <img src="./img2/btnButtom_index1.png" alt="">
                <img @click="goReport" src="./img2/btnButtom_mine1.png" alt="">
            </div> -->
        </div>
        <div v-show="isreport" class="onebasicinformationclose" @click="goclose"><i class="el-icon-circle-close"></i></div>
        <completescreening v-show="isreport" goclose="goclose"></completescreening>
        <tabbar></tabbar>
    </div>
</template>
<script>
import { getUserData, addpacketstep, getredpacket, addburyingpoint, getOpenId, currentpacketstep, update } from '@/api/http.js'
import tabbar from '@/components/tabbar/tabbar.vue'
import completescreening from '@/components/components/completescreening/completescreening.vue'
import axios from "axios";
import {
    getUrl
} from "@/config.js";

export default {
    components: {
        tabbar,
        completescreening,
    },
    props: {
    },
    data() {
        return {
            baseUrl: "",
            isreport: false,
            isShow: true,
            data: {},
            inputData: "",
            imgUrl: "",
            activityCount: "",
            lstBanner: [],
            sex: '',
            isDone: '0',
            anFlag: '',
            openId: '',
            wechatUserId: '',
        };
    },
    computed: {

    },
    methods: {
        // 获取code
        getweixinCode() {
            this.code = ''
            var local = location.href.split('#')[0] // 获取页面url
            var appid = 'wx89289c3a3da01e68'
            this.code = this.getUrlCode().code // 截取code
            if (this.code == null || this.code === '') { // 如果没有code，则去请求
                window.location.href =
                    `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
            }

            let token = localStorage.getItem('token')
            if (token) {
                console.log('code', this.code);
                getOpenId(this.code).then((res) => {
                    console.log('resssssssssssss', res);
                    this.openId = res.data.openId
                    localStorage.setItem('openId', res.data.openId)
                    sessionStorage.setItem('scanUrl', window.location.href.split('?')[0])
                    // 查找第一个?的下标
                    let start = window.location.href.indexOf('?');
                    // 查找第一个#号下标
                    let end = window.location.href.indexOf('#')
                    // 需要替换的内容
                    let rep = window.location.href.substring(start, end)
                    window.history.replaceState(null, '', window.location.href.replace(rep, ''))
                    console.log('++++++++', start, end, rep, window.location.href);

                })
            } else {
                this.$router.push('/guidepage')
            }

        },
        getUrlCode() {
            // 截取url中的code方法
            var url = location.search
            console.log('此页面', url);
            var theRequest = new Object()
            if (url.indexOf("?") != -1) {
                var str = url.substr(1)
                var strs = str.split("&")
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
                }
            }
            console.log('theRequest', theRequest);
            return theRequest
        },

        imageClick() {
            let obj = { buriedPointName: '首页BANNER入口', section: '3', module: '1', function: '1', redirectPage: '信息填写页', orgNo: '' }
            addburyingpoint(obj).then(res => {
                console.log(res)
            })
            this.$router.push('/bannersearch')
            // window.location.href = 'https://www.ainaoxingdong.com/braintest/index.html#/bannersearch'
        },
        goMessage1() {
            // this.$router.push('/indexButtonone')
            this.$router.push('/share')
        },
        goMessage() {
            console.log(this.anFlag)
            if (this.anFlag == 0) {
                console.log(this.anFlag)
                let obj = { buriedPointName: '首页点击我要筛查', section: '3', module: '2', function: '1', redirectPage: '信息填写页', orgNo: '' }
                addburyingpoint(obj).then(res => {
                    console.log(res)
                })
                this.$router.push('/message')

            } else {
                this.isreport = true
                let obj = { buriedPointName: '首页点击完成筛查弹窗提示', section: '3', module: '2', function: '2', redirectPage: '完成筛查弹窗提示', orgNo: '' }
                addburyingpoint(obj).then(res => {

                    console.log(res)
                })
                // this.$router.push('/completescreening')
            }

        },
        goclose() {
            this.isreport = false
        },
        goReport() {
            this.$router.push({
                path: '/mine',
                query: {
                    sex: this.sex
                }
            })
        },
        getData() {
            getUserData().then(res => {
                console.log('res.code', res.code);
                if (res.code !== 200) {
                    window.localStorage.clear()
                    this.$router.push('/guidepage')
                    // debugger
                    //   localStorage.setItem("sex", res.data.rows[0].sex);
                    // this.$router.push('/activity')
                } else {
                    // this.$message.error('信息获取失败！');
                    const userInfo = res.rows[0];
                    console.log('个人信息', userInfo);
                    this.sex = userInfo.sex
                    console.log('性别', this.sex);
                    this.isDone = res.rows[0].isDone
                    this.openId = userInfo.openId
                    this.wechatUserId = userInfo.wechatUserId
                    // if(this.openId !== null || this.openId !== ''){
                    //     localStorage.setItem('openId',this.openId)
                    // }

                    console.log('this.openId111111111', this.openId);
                    // this.ruleForm.userName = userInfo.userName
                    // this.ruleForm.userCardId = userInfo.userCardId
                    // this.ruleForm.sex = userInfo.sex
                    // this.ruleForm.education = userInfo.education
                    // this.ruleForm.age = userInfo.age

                    // this.phone = userInfo.phone
                    // console.log(phone);
                }
            })
            //     var baseUrl = getUrl();
            //     var token = localStorage.getItem('token')
            //     axios.get(
            //         baseUrl + "/an/wechat_app/wechat_user/info?token=" + token,
            //         // `https://www.ainaoxingdong.com/api/an/wechat_app/wechat_user/report/bind_img?token=${_this.token}`,
            //         {
            //             // phone: this.phoneInfo,
            //             // isSuggest: 3
            //         }
            //     ).then((res) => {
            //         const userInfo = res.data.rows[0];
            //         console.log('个人信息', userInfo);
            //         this.sex = userInfo.sex
            //         console.log('性别', this.sex);
            //         // this.ruleForm.userName = userInfo.userName
            //         // this.ruleForm.userCardId = userInfo.userCardId
            //         // this.ruleForm.sex = userInfo.sex
            //         // this.ruleForm.education = userInfo.education
            //         // this.ruleForm.age = userInfo.age

            //         // this.phone = userInfo.phone
            //         // console.log(phone);
            //         if (res.data.code == 200) {

            //             // debugger
            //             //   localStorage.setItem("sex", res.data.rows[0].sex);
            //             // this.$router.push('/activity')
            //         } else {
            //             // this.$message.error('信息获取失败！');
            //         }
            //     });
        },
        getaddpacketstep() {
            let url = encodeURIComponent('activity')
            addpacketstep(url).then(res => {
                console.log(res)
            })
        }

    },
    watch: {},
    mounted() {
        // this.getData()
        this.$store.dispatch('checkUser');
        this.getaddpacketstep()
        getredpacket().then(res => {
            if (res.code !== 500) {
                this.anFlag = res.data.anFlag
                console.log(res, '调用了')
                if (res.data.anFlag == 1) {
                    this.anFlag = res.data.anFlag
                    console.log('完成筛查')
                } else {
                    this.anFlag = res.data.anFlag
                    console.log('没有完成筛查')
                }
            }

        })
        // var me = this;
        // this.baseUrl = getUrl();
        // axios.get(
        //     this.baseUrl + "/system/banner/list?bannerType=0"
        // ).then((res) => {
        //     me.lstBanner = res.data.rows;
        //     for (let i = 0; i < me.lstBanner.length; i++) {
        //         var banner = me.lstBanner[i];
        //         banner.imgUrl = me.baseUrl + banner.imgUrl;
        //     }
        // });


    },
    created() {
        console.log('当前页面路径', window.location.href);

        currentpacketstep().then(res => {
            console.log(res.data.router)
            this.$router.push('/' + decodeURIComponent(res.data.router))
        })
        getUserData().then(res => {
            console.log('res.code', res.code);
            if (res.code !== 200) {
                window.localStorage.clear()
                this.$router.push('/guidepage')
                // debugger
                //   localStorage.setItem("sex", res.data.rows[0].sex);
                // this.$router.push('/activity')
            } else {
                // this.$message.error('信息获取失败！');
                const userInfo = res.rows[0];
                console.log('个人信息', userInfo);
                this.sex = userInfo.sex
                console.log('性别', this.sex);
                this.isDone = res.rows[0].isDone
                this.openId = userInfo.openId
                console.log('this.openId', this.openId);
                localStorage.setItem('openId', this.openId)
                // if (this.openId == null || this.openId == '') {
                //     var ua = window.navigator.userAgent.toLowerCase();
                //     if (ua.match(/micromessenger/i) == 'micromessenger') {
                //         this.getweixinCode();
                //         console.log('获取');
                //     } else {
                //         console.log('不在微信环境中');
                //     }
                // } else {
                //     console.log('有openId');
                // }
                if (this.openId == null || this.openId == '') {
                    let url = new URL(window.location.href);
                    let params = new URLSearchParams(url.search);
                    let openid = params.get('openid')
                    console.log('=========openid====', openid);
                    localStorage.setItem('openId', openid)
                    let obj = {}
                    obj.openId = openid
                    obj.wechatUserId = this.wechatUserId
                    update(obj).then(res => {
                        console.log('更新', res);
                    })
                }
                console.log('this.openId111111111', this.openId);
            }
        })



    }
};
</script>

<style lang="scss" scoped>
.el-carousel__item:nth-child(2n+1) {
    background-color: #fff;
}

.el-carousel__item {
    background-color: #fff !important;
}

* {
    margin: 0;
    padding: 0;
}

.banner {
    width: 340px;
    height: 160px;
    margin: auto;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

.onebasicinformationclose {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
    width: 45px;
    height: 45px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    z-index: 99;
}

.shaicha {
    margin-top: 20px;
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.shaicha img {
    width: 100%;

}

.btnNews {

    width: 80% !important;
    // height: 83px;
}

.bottom {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
}

.bottom img {
    width: 156px;
    height: 36px;

}

.infoClass {
    position: relative;
    font-size: medium;
    font-weight: bold;
    left: 85px;
    top: 450px;
}

.countClass {
    position: relative;
    font-size: medium;
    left: 120px;
    top: 665px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.swiper-item {
    display: block;
    height: 312rpx;
    line-height: 300rpx;
    text-align: center;
}

.messageboxactive {
    position: relative;
    top: -191px;
    left: 70px;
    color: #fff;
    padding: 10px;
    width: 192px;
    height: 91px;
    // background: #fcfcfc;
    font-size: 24px;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: scale 2s infinite;
    // background: url(../assets/images/home/首页-弹窗.png) 192px 91px;
}

.messageboxactivebg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.messageboxactivetext {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px 10px;
    // padding: 10px 10px;
    width: 100%;
    color: #fff;
    z-index: 6;
    font-size: 16px;
}

.messageboxactivetext-text {
    padding: 3px 10px;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.1);
    }

    40% {
        transform: scale(0.9);
    }

    60% {
        transform: scale(1.1);
    }

    280% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}
</style>
